<template>
  <van-search
      v-model="value"
      show-action
      shape="round"
      action-text=" "
      placeholder="请输入要搜索的标签"
      @update:model-value="onSearch"
  />
  <van-divider content-position="left">已选标签</van-divider>
  <div v-if="activeIds.length === 0">请选择标签</div>
  <van-row :gutter="[15,15]" style="margin: 0 16px">
    <van-col v-for="tag in activeIds">
      <van-tag round closeable size="medium" type="primary" @close="doClose(tag)">
        {{ getTagName(tag) }}
      </van-tag>
    </van-col>
  </van-row>


  <van-divider content-position="left">可选标签</van-divider>
  <van-tree-select
      v-model:active-id="activeIds"
      v-model:main-active-index="activeIndex"
      :items="tagList"
  />
  <div style="padding: 16px">
    <van-button block type="primary" @click="doSearchResult" round>搜索</van-button>
  </div>
</template>



<script setup lang="ts">
import {onMounted, ref} from "vue";
import router from "../../router";
import request from '../../utils/request'
import {TagSearch} from "../../services/api.ts";

const value = ref('');
const activeIds = ref([]);
const activeIndex = ref(0);
const originTagList = ref([])


onMounted(async () => {
  const res = await TagSearch()
  if (res.code === 0) {
    originTagList.value = res.data
    tagList.value = res.data
  }
})

// const originTagList: API.TagSearchResponse[] = [
//   {
//     text: '方向',
//     children: [
//       {text: 'Java', id: 1},
//       {text: 'C++', id: 2},
//       {text: 'Python', id: 3},
//       {text: 'Go', id: 4},
//       {text: 'Vue', id: 5},
//     ],
//   },
//   {
//     text: '性别',
//     children: [
//       {text: '男', id: 6},
//       {text: '女', id: 7},
//     ],
//   },
//   {
//     text: '学历',
//     children: [
//       {text: '专科', id: 8},
//       {text: '本科', id: 9},
//       {text: '研究生', id: 10},
//       {text: '博士', id: 11},
//     ],
//   },
//
// ];

const tagList = ref([])

const doClose = (tag) => {

  activeIds.value = activeIds.value.filter(item => {
    return item !== tag
  })
};

const doSearchResult = () => {
  router.push({
    path: '/search/searchResult',
    query: {
      tags: activeIds.value
      // tags:convertTagIdsToTagNames(activeIds.value)
    }
  })
}

const getTagName = (tagId) => {
  let tempTagList = originTagList.value.flatMap(parent => {
    return parent.children
  })
  return tempTagList.find(tag => tag.id === tagId)?.text
}


const fuzzyMatch = (str, keyword) => {
  return str.toLowerCase().includes(keyword.toLowerCase());
}


const onSearch = (val) => {
  if (val === '') {
    tagList.value = originTagList.value
    activeIndex.value = 0
    return;
  }

  // console.log(originTagList)
  tagList.value = originTagList.value.map(parent => {
    let tempParent = {...parent}
    tempParent.children = tempParent.children.filter(item => {
      return fuzzyMatch(item.text, val)
    })
    return tempParent
  })
  let index = activeIndex.value
  tagList.value.forEach((parent) => {
    if (parent.children.length !== 0) {
      activeIndex.value = index
      return
    }
    index++
  })
};
</script>



<style scoped>
</style>